<template>
    <div id="invite-friends">
      <div class="invitation-code">
        <p>邀请码  (长按可复制)</p>
        <p>{{inviteval}}</p>
      </div>
      <share-float :shareshow="shareshow" :friends="friends" v-on:sharefriends="hideshare"></share-float>
      <div class="credit-btn">
        <flexbox>
          <flexbox-item>
            <x-button type="primary" @click.native="invitecode">二维码邀请好友</x-button>
          </flexbox-item>
          <flexbox-item>
            <x-button type="warn" @click.native="sharecode">分享邀请好友</x-button>
          </flexbox-item>
        </flexbox>
      </div>
      <div v-transfer-dom class="invite-qrcode">
        <x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>
          <div class="img-box">
            <p>微信扫描二维码或长按保存</p>
            <img :src="dataUrl">
            <canvas ref="canvas" v-show="false"></canvas>
          </div>
        </x-dialog>
      </div>
      <divider>{{ '邀请码使用规则' }}</divider>
      <div class="use-rule">
        <p>1、当您邀请其他同行或朋友使用信贷动力时，可以建议他们使用邀请码注册，发展为您的下线；</p>
        <p>2、被邀请人每有一个客户放款成功，您均会收到一定比例的拓展奖励（一年内）；</p>
        <p>3、邀请码仅能在新用户注册过程中填写，漏填不补；</p>
        <p>4、拓展奖励金额以信贷动力最新规定为准。</p>
      </div>
      <div style="background-color:#fff1d7;padding-bottom:.7rem;">
        <div class="invite-earnings">
          <today-invite></today-invite>
          <my-team></my-team>
          <div class="check-earnings" @click="teamevent">查看团队收益详情</div>
        </div>
      </div>
    </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import ShareFloat from '../comment/ShareFloat'
import MyTeam from '../agencycenter/invite/MyTeam'
import TodayInvite from '../agencycenter/invite/TodayInvite'
import { Flexbox, FlexboxItem, XButton, Divider, TransferDomDirective as TransferDom, XDialog } from 'vux'
import api from '../api'
import qr from 'qr.js'
import utils from '../utils'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      shareshow: false,
      friends: false,
      showHideOnBlur: false,
      inviteval: '',
      inviteurl: '',
      tokenval: '',
      dataUrl: '',
      logo: '../../static/img/logo.png',
      size: 128,
      bgColor: '#fff',
      fgColor: '#000'
    }
  },
  components: {
    Flexbox,
    FlexboxItem,
    XButton,
    Divider,
    ShareFloat,
    XDialog,
    MyTeam,
    TodayInvite
  },
  created () {
    window.document.title = '邀请赚钱'
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    var params = {
      Tokenuser: this.tokenval,
      userid: this.$store.state.userID,
      timestamp: timeStamp
    }
    api.message(params).then(res => {
      console.log(res)
      this.inviteval = res.data.inviteCode
      this.inviteurl = this.$store.state.Url + '/passport/register?shareParam=invite&userId=' + this.$store.state.userID + '&inviteCode=' + this.inviteval + '&channel=6'
      this.createQr()
      this.WXsharecontent()
      utils.jssdkwx(api, this.$wechat, this.$store)
    })
  },
  methods: {
    hideshare () {
      this.shareshow = false
    },
    teamevent () {
      window.location.href = '/center/team'
    },
    invitecode () {
      this.showHideOnBlur = true
    },
    sharecode () {
      this.friends = true
      this.shareshow = true
      this.WXsharecontent()
      utils.refreshShare(this.$wechat, this.$store)
    },
    createQr () {
      const qrcode = qr(this.inviteurl)
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const size = this.size / qrcode.moduleCount
      const scale = window.devicePixelRatio / this.getPixelRatio(ctx)
      canvas.height = canvas.width = this.size * scale
      ctx.scale(scale, scale)
      qrcode.modules.forEach((row, rdx) => {
        row.forEach((cell, cdx) => {
          ctx.fillStyle = cell ? this.fgColor : this.bgColor
          var w = (Math.ceil((cdx + 1) * size) - Math.floor(cdx * size))
          ctx.fillRect(Math.round(cdx * size), Math.round(rdx * size), w, w)
        })
      })
      var image = document.createElement('img')
      image.src = this.logo
      image.onload = () => {
        var dwidth = this.size * 0.2
        var dx = (this.size - dwidth) / 2
        var dheight = image.height / image.width * dwidth
        var dy = (this.size - dheight) / 2
        image.width = dwidth
        image.height = dheight
        ctx.drawImage(image, dx, dy, dwidth, dheight)
        this.dataUrl = canvas.toDataURL()
      }
    },
    getPixelRatio (ctx) {
      return ctx.webkitBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
    },
    WXsharecontent () {
      var sharetitle = '有好友邀请你加入信贷动力。'
      var shareimg = this.$store.state.Url + '/static/img/logo.png'
      var sharedesc = '信贷动力您的移动金融营销赚钱助手！'
      var shareUrl = this.$store.state.Url + '/passport/register'
      var shareParams = '?shareParam=invite&userId=' + this.$store.state.userID + '&inviteCode=' + this.inviteval
      this.$store.commit('changeIndexConf', {
        shareTitle: sharetitle,
        shareDesc: sharedesc,
        shareImg: shareimg,
        shareLink: shareUrl + shareParams
      })
    }
  }
}
</script>

